<script setup>
import { ref, watch, computed } from 'vue';
import { ElDialog, ElButton, ElMessage, ElLoading, ElDescriptions, ElDescriptionsItem, ElTag } from 'element-plus';

// 引入字典和API
import {  userTypeMap } from '@/utils/dict';
import { getOrderDetail } from '@/apis/workorderAPI';

// 定义组件接收的 props
const props = defineProps({
  id: {
    type: [String, Number],
    required: true
  },
  modelValue: {
    type: Boolean,
    default: false
  }
});

// 定义事件
const emit = defineEmits(['update:modelValue', 'close']);

// v-model 双向绑定
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});

// 详情数据
const detailData = ref({});
const feedback = ref({});
const loadingInstance = ref(null);

// 获取详情数据
const fetchDetail = async (currentId) => {
  if (!currentId) return;

  // 1. 创建 Loading 实例
  const loadingInstance = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)'
  });

  try {
    // 2. 尝试请求数据
    const response = await getOrderDetail(currentId);
    const { data } = response;
    detailData.value = data;
    feedback.value = data.feedback || {};
  } catch (error) {
    // 3. 请求失败时给出提示
    console.error('获取工单详情失败:', error);
    ElMessage.error('获取工单详情失败');
  } finally {
    // 4. 无论成功或失败，都关闭 Loading
    loadingInstance.close();
  }
};

// 监听 id 变化，重新加载数据
watch(() => props.id, (newId) => {
  fetchDetail(newId);
}, { immediate: true });

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
  emit('close');
};
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    title="工单详情"
    width="70%"
    :before-close="handleClose"
    custom-class="workorder-detail-dialog"
  >
    <!-- 使用 el-form 作为容器 -->
    <el-form :model="detailData" label-width="120px" class="detail-form">
      <!-- 基础信息 -->
      <el-form-item label="ID">{{ detailData.id }}</el-form-item>
      <el-form-item label="标题">{{ detailData.title }}</el-form-item>
      <el-form-item label="描述">{{ detailData.des }}</el-form-item>
      <el-form-item label="姓名">{{ detailData.name }}</el-form-item>
      <el-form-item label="手机号">{{ detailData.phone }}</el-form-item>
      <el-form-item label="地址">{{ detailData.address }}</el-form-item>

      <!-- 状态信息 -->
      <el-form-item label="状态">
        <el-tag
          size="small"
          :type="detailData.status === 3 ? 'success' : detailData.status === 2 ? 'warning' : detailData.status === 1 ? 'info' : 'default'"
        >
          {{ detailData.statusDesc }}
        </el-tag>
      </el-form-item>

      <el-form-item label="客户类型">
        <el-tag size="small" type="primary">
          {{ userTypeMap[detailData.type] ?? '未知' }}
        </el-tag>
      </el-form-item>

      <!-- 评价信息 -->
      <el-form-item label="星级">
        <!-- 注意：v-model 后面多了一个空格，建议去掉 -->
        <el-rate v-model="feedback.rating" text-color="#ff9900" score-template="{value}" disabled />
      </el-form-item>

      <el-form-item label="评价">{{ feedback.comment || '暂无评价' }}</el-form-item>

      <!-- 时间信息 -->
      <el-form-item label="创建时间">{{ detailData.createTime }}</el-form-item>
      <el-form-item label="更改时间">{{ detailData.updateTime }}</el-form-item>
    </el-form>

    <!-- 底部只保留关闭按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.detail-form {
  margin-top: 10px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  :deep(.el-dialog) {
    width: 95% !important;
  }
  :deep(.el-form-item__label) {
    width: 100px !important;
  }
}
</style>
